<!--
 * @Author: quit
 * @Date: 2021-11-23 10:44:34
 * @LastEditTime: 2021-12-14 15:07:41
 * @Descripttion: 项目建筑管理
-->
<template>
  <div id="Construction-container">
    <div class="app-container" style="height: 100%">
      <el-card>
        <el-row>
          <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="addItemBtn">{{ '添加项目建筑' }}</el-button>
          <!-- <el-button type="danger" size="mini" icon="el-icon-delete">{{ $t('button.batchRemove') }}</el-button> -->
          <el-button type="primary" size="mini" @click="toggleRowExpansion(true)">全部展开</el-button>
          <el-button type="primary" size="mini" @click="toggleRowExpansion(false)">全部折叠</el-button>
        </el-row>
        <el-row>
          <div class="tabel-box">
            <el-table
              ref="dataTreeList"
              v-loading="loading"
              lazy
              :load="tableLoad"
              :data="tableData"
              :max-height="tableHeight"
              row-key="id"
              :default-expand-all="false"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
              <!-- <el-table-column type="selection" min-width="40" fixed="left" /> -->
              <el-table-column type="index" label="编号" min-width="40" fixed="left" />
              <el-table-column prop="buildname" label="建筑名" min-width="140" />
              <el-table-column prop="builddescribe" label="建筑说明" min-width="500" />
              <el-table-column header-align="center" align="center" fixed="right" :label="$t('table.operable')" min-width="240">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="addChildren(scope.row)">{{ '添加' }}</el-button>
                  <el-button type="success" size="mini" @click="editHandle(scope.row)">{{ $t('button.edit') }}</el-button>
                  <el-button type="danger" size="mini" @click="deleteHandle(scope.row)">{{ $t('button.delete') }}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-row>
      </el-card>
    </div>
    <!-- 添加\修改弹出框 -->
    <el-dialog :title="dislogTitle" width="30%" :visible.sync="dialogFormVisible" @close="dialogClose">
      <el-form ref="dialogFrom" label-position="right" :model="dialogFrom">
        <el-row>
          <el-form-item label="建筑名" :label-width="formLabelWidth">
            <el-input v-model="dialogFrom.buildname" autocomplete="off" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="建筑说明" :label-width="formLabelWidth">
            <el-input v-model="dialogFrom.builddescribe" type="textarea" :rows="3" autocomplete="off" />
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="dialogFormState !== 0" type="primary" @click="dialogSubmit">确 定</el-button>
        <el-button v-if="dialogFormState === 0" type="primary" @click="dialogSubmit">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import $ from 'jquery'
import { getBYIdList, addBuild, updateBuild, delBuild } from '@/api/BotRequest'
import { getData } from '@/utils/auth'

export default {
  components: {},
  data() {
    return {
      botData: {},
      tableHeight: null,
      loading: false,
      tableData: [],
      dialogFormVisible: false,
      dialogFrom: { buildname: '', builddescribe: '' },
      formLabelWidth: '100px',
      dislogTitle: '',
      dialogFormState: 1, // 弹出框功能区分
      submitData: {}
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  created() {
    this.botData = getData('BotData')
    this.getInfo()
  }, // 生命周期 - 创建完成（可以访问当前this实例）
  mounted() {
    this.setTableHeight()
    window.onresize = () => {
      this.setTableHeight()
    }
  }, // 生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
  // 方法集合
  methods: {
    // 动态设置表格高
    setTableHeight() {
      var num = $(window).height() - 126
      this.tableHeight = num
    },

    // 获取类型基本数据
    async getInfo() {
      this.loading = true
      try {
        const { data } = await getBYIdList(this.botData.id)
        this.tableData = data
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },

    // 全部展开与折叠
    forArr(arr, isExpand) {
      arr.forEach(i => {
        this.$refs.dataTreeList.toggleRowExpansion(i, isExpand)
        if (i.children) {
          this.forArr(i.children, isExpand)
        }
      })
    },
    toggleRowExpansion(isExpansion) {
      this.forArr(this.tableData, isExpansion)
    },

    // 弹窗关闭事件
    dialogClose() {
      this.submitData = {}
      this.dialogFrom = { buildname: '', builddescribe: '' }
      this.dialogFormState = ''
      this.dislogTitle = ''
    },

    // 添加一级数据
    async addItemBtn() {
      this.dislogTitle = '添加项目建筑'
      this.dialogFormState = 1
      this.dialogFormVisible = true
      this.submitData = {
        appid: this.botData.id,
        buildparent: -1
      }
    },

    // 弹出层确认发送请求
    async dialogSubmit() {
      // 0为编辑 , 1为添加一级建筑数据,2为添加子级数据
      try {
        if (this.dialogFormState === 0) {
          const { message } = await updateBuild({ ...this.submitData, ...this.dialogFrom })
          this.$message.success(message)
        } else if (this.dialogFormState === 1) {
          const { message } = await addBuild({ ...this.submitData, ...this.dialogFrom })
          this.$message.success(message)
        } else if (this.dialogFormState === 2) {
          const { message } = await addBuild({ ...this.submitData, ...this.dialogFrom })
          this.$message.success(message)
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.dialogFormVisible = false
        this.getInfo()
      }
    },

    /* tabel-item 操作 */
    // 添加
    addChildren(data) {
      this.dislogTitle = '添加子级项目建筑'
      this.dialogFormState = 2
      this.dialogFormVisible = true
      this.submitData.buildparent = data.id
      this.submitData = {
        appid: data.appid,
        buildparent: data.id
      }
    },
    // 修改
    editHandle(data) {
      this.dislogTitle = '编辑项目建筑'
      this.dialogFormState = 0
      this.dialogFrom.buildname = data.buildname
      this.dialogFrom.builddescribe = data.builddescribe
      this.dialogFormVisible = true
      this.submitData = {
        id: data.id,
        appid: data.appid,
        buildparent: data.buildparent
      }
    },
    // 删除
    async deleteHandle(data) {
      this.$confirm('此操作将永久删除当前数据, 是否继续?', '确认操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const { message } = await delBuild(data.id)
          await this.getInfo()
          this.$message.success({ message })
        })
        .catch(error => {
          console.log(error)
        })
    },

    // 懒加载(预留API)
    tableLoad() {}
  }
}
</script>
<style lang="scss" scoped>
.el-input,
.el-select,
.el-textarea,
.el-cascader {
  width: calc(100% - 20px);
}
</style>
